<template>
  <i
    :class="`el-icon-delete ${ disabled ? 'delete-btn__disabled' : 'delete-btn' }`"
    @click="handleClick"
  />
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick () {
      if (this.disabled) return
      this.$emit('delete')
    }
  }
}
</script>
<style lang="less" scoped>
.delete-btn {
  color: #4493fb;
  cursor: pointer;
  &:hover {
    color: #63a8fc;
  }
}
.delete-btn__disabled {
  background-color: #transparent;
  color: #C0C4CC;
  cursor: not-allowed;
  &:hover {
    color: #C0C4CC;
  }
}
</style>
